<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3任务看板应用</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; padding: 20px; }
        
        .kanban-board { display: flex; gap: 20px; min-height: 80vh; }
        .status-column { flex: 1; background: white; border-radius: 8px; padding: 15px; }
        .status-column h3 { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid; }
        
        .task-item { 
            background: #fff; border-left: 4px solid #4CAF50; 
            padding: 12px; margin: 10px 0; border-radius: 4px;
            cursor: move; transition: all 0.3s;
        }
        .task-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .task-item.selected { background: #e3f2fd; border-left-color: #2196F3; }
        .task-item.high-priority { border-left-color: #f44336; }
        
        .task-actions { margin-top: 8px; display: flex; gap: 5px; }
        .task-actions button { padding: 4px 8px; border: none; border-radius: 3px; cursor: pointer; }
        
        .context-menu {
            position: fixed; background: white; border: 1px solid #ddd;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;
        }
        .context-menu-item { padding: 8px 12px; cursor: pointer; }
        .context-menu-item:hover { background: #f5f5f5; }
        
        .editing { background: #fffde7; }
    </style>
</head>
<body>
    <div id="app">
        <header style="margin-bottom: 30px;">
            <h1>📋 任务看板应用</h1>
            <div class="controls">
                <!-- 快捷键提示 -->
                <small>快捷键: Enter保存 | Esc取消 | Ctrl+A全选</small>
            </div>
        </header>

        <!-- 任务添加表单 -->
        <form @submit="addTask" class="add-task-form">
            <input type="text" v-model="newTask.title" placeholder="新任务内容" required>
            <select v-model="newTask.priority">
                <option value="normal">普通</option>
                <option value="high">重要</option>
            </select>
            <button type="submit">添加任务</button>
        </form>

        <!-- 看板主体 -->
        <div class="kanban-board" @keydown="handleGlobalShortcut">
            <!-- 三个状态列 -->
            <div v-for="status in statusList" :key="status.id" class="status-column"
                 @drop="moveTask(status.id)" @dragover="allowDrop">
                <h3 :style="{ borderBottomColor: status.color }">{{ status.name }}</h3>
                
                <!-- 任务列表 -->
                <div v-for="task in getTasksByStatus(status.id)" :key="task.id"
                     class="task-item" :class="{ 
                         selected: selectedTaskIds.includes(task.id),
                         'high-priority': task.priority === 'high',
                         editing: editingTaskId === task.id
                     }"
                     draggable="true"
                     @dragstart="dragStart(task.id)"
                     @click="selectTask(task.id, $event)"
                     @click.right.prevent="showContextMenu(task, $event)">
                    
                    <!-- 任务内容显示 -->
                    <div v-if="editingTaskId !== task.id">
                        <strong>{{ task.title }}</strong>
                        <span v-if="task.priority === 'high'" style="color: red;">❗</span>
                    </div>
                    
                    <!-- 任务编辑表单 -->
                    <div v-else>
                        <input type="text" v-model="task.title" 
                               @keyup.enter="saveEdit(task)"
                               @keyup.esc="cancelEdit">
                    </div>
                    
                    <!-- 任务操作按钮 -->
                    <div class="task-actions">
                        <button @click.stop="editTask(task.id)">编辑</button>
                        <button @click.once="completeTask(task.id)">完成</button>
                        <button @click="deleteTask(task.id)">删除</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右键菜单 -->
        <div v-if="contextMenu.visible" class="context-menu" 
             :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }">
            <div class="context-menu-item" @click="markAsImportant">标记为重要</div>
            <div class="context-menu-item" @click="duplicateTask">复制任务</div>
        </div>

        <!-- 统计信息 -->
        <footer style="margin-top: 20px;">
            <p>总任务: {{ tasks.length }} | 已完成: {{ completedCount }} | 进行中: {{ inProgressCount }}</p>
        </footer>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    // 状态列表
                    statusList: [
                        { id: 'todo', name: '待处理', color: '#ff9800' },
                        { id: 'inprogress', name: '进行中', color: '#2196f3' },
                        { id: 'done', name: '已完成', color: '#4caf50' }
                    ],
                    
                    // 任务数据
                    tasks: [
                        { id: 1, title: '学习Vue3事件处理', status: 'todo', priority: 'high' },
                        { id: 2, title: '编写任务看板应用', status: 'inprogress', priority: 'normal' },
                        { id: 3, title: '测试修饰符功能', status: 'todo', priority: 'normal' }
                    ],
                    
                    // 新任务表单
                    newTask: { title: '', priority: 'normal' },
                    
                    // 交互状态
                    selectedTaskIds: [],
                    editingTaskId: null,
                    dragTaskId: null,
                    
                    // 右键菜单
                    contextMenu: { visible: false, x: 0, y: 0, task: null }
                }
            },
            
            computed: {
                completedCount() {
                    return this.tasks.filter(task => task.status === 'done').length;
                },
                inProgressCount() {
                    return this.tasks.filter(task => task.status === 'inprogress').length;
                }
            },
            
            methods: {
                // 任务管理方法
                addTask(event) {
                    // 需要实现：添加新任务，阻止表单默认提交行为
                    const newTask = {
                        id: Date.now(),
                        title: this.newTask.title,
                        status: 'todo',
                        priority: this.newTask.priority
                    };
                    this.tasks.push(newTask);
                    this.newTask = { title: '', priority: 'normal' };
                },
                
                // 任务选择逻辑
                selectTask(taskId, event) {
                    // 需要实现：Ctrl+点击多选，Shift+点击范围选择
                    if (event.ctrlKey) {
                        // Ctrl+点击：切换选择状态
                        const index = this.selectedTaskIds.indexOf(taskId);
                        if (index > -1) {
                            this.selectedTaskIds.splice(index, 1);
                        } else {
                            this.selectedTaskIds.push(taskId);
                        }
                    } else if (event.shiftKey && this.selectedTaskIds.length > 0) {
                        // Shift+点击：范围选择（简化实现）
                        this.selectedTaskIds.push(taskId);
                    } else {
                        // 普通点击：单选
                        this.selectedTaskIds = [taskId];
                    }
                },
                
                // 任务编辑功能
                editTask(taskId) {
                    this.editingTaskId = taskId;
                },
                
                saveEdit(task) {
                    this.editingTaskId = null;
                    // 这里可以添加保存逻辑
                },
                
                cancelEdit() {
                    this.editingTaskId = null;
                },
                
                // 拖拽功能
                dragStart(taskId) {
                    this.dragTaskId = taskId;
                },
                
                allowDrop(event) {
                    // 需要实现：允许拖放，阻止默认行为
                    event.preventDefault();
                },
                
                moveTask(targetStatus) {
                    // 需要实现：移动任务到目标状态列
                    if (this.dragTaskId) {
                        const task = this.tasks.find(t => t.id === this.dragTaskId);
                        if (task) {
                            task.status = targetStatus;
                        }
                        this.dragTaskId = null;
                    }
                },
                
                // 右键菜单功能
                showContextMenu(task, event) {
                    // 需要实现：显示右键菜单，记录位置和任务信息
                    this.contextMenu = {
                        visible: true,
                        x: event.clientX,
                        y: event.clientY,
                        task: task
                    };
                },
                
                markAsImportant() {
                    if (this.contextMenu.task) {
                        this.contextMenu.task.priority = 
                            this.contextMenu.task.priority === 'high' ? 'normal' : 'high';
                        this.contextMenu.visible = false;
                    }
                },
                
                duplicateTask() {
                    // 复制任务逻辑
                    this.contextMenu.visible = false;
                },
                
                // 全局快捷键
                handleGlobalShortcut(event) {
                    // 需要实现：全局快捷键处理
                    switch(event.key) {
                        case 'Delete':
                            // 删除选中的任务
                            this.deleteSelectedTasks();
                            break;
                        case 'a':
                            if (event.ctrlKey) {
                                event.preventDefault(); // 阻止浏览器全选
                                this.selectAllTasks();
                            }
                            break;
                    }
                },
                
                deleteSelectedTasks() {
                    this.tasks = this.tasks.filter(task => 
                        !this.selectedTaskIds.includes(task.id)
                    );
                    this.selectedTaskIds = [];
                },
                
                selectAllTasks() {
                    this.selectedTaskIds = this.tasks.map(task => task.id);
                },
                
                // 辅助方法
                getTasksByStatus(status) {
                    return this.tasks.filter(task => task.status === status);
                },
                
                completeTask(taskId) {
                    const task = this.tasks.find(t => t.id === taskId);
                    if (task) {
                        task.status = 'done';
                    }
                },
                
                deleteTask(taskId) {
                    this.tasks = this.tasks.filter(task => task.id !== taskId);
                    this.selectedTaskIds = this.selectedTaskIds.filter(id => id !== taskId);
                }
            },
            
            mounted() {
                // 点击页面其他区域关闭右键菜单
                document.addEventListener('click', () => {
                    this.contextMenu.visible = false;
                });
            }
        }).mount('#app');
    </script>
</body>
</html>